<template>
  <div>
    <a-table :data-source="tableList" :pagination="false" :scroll="{ x: 1300 }">
      <!-- 物流商 -->
      <a-table-column
        key="logisticsName"
        data-index="logisticsName"
        align="center"
        width="10%"
      >
        <span slot="title"> 物流商</span>
        <template slot-scope="text, record">
          {{ record.logisticsName }}
        </template>
      </a-table-column>
      <!-- 运单号 -->
      <a-table-column
        key="waybillNm"
        data-index="waybillNm"
        align="center"
        width="18%"
      >
        <span slot="title">运单号</span>
        <template slot-scope="text, record">
          <span>
            {{ record.waybillNm }}
          </span>
        </template>
      </a-table-column>
      <!-- 商品名称 -->
      <a-table-column
        key="skuName"
        data-index="skuName"
        align="center"
        width="10%"
      >
        <span slot="title">商品名称</span>
        <template slot-scope="text, record">
          {{ record.skuName }}
        </template>
      </a-table-column>
      <!-- 退件SKU -->
      <a-table-column key="sku" data-index="sku" align="center" width="10%">
        <span slot="title">退件SKU</span>
        <template slot-scope="text, record">
          <span>
            {{ record.sku }}
          </span>
        </template>
      </a-table-column>
      <!-- 退件数量 -->
      <a-table-column
        key="productNumber"
        data-index="productNumber"
        align="center"
        width="10%"
      >
        <span slot="title">退件数量</span>
        <template slot-scope="text, record">
          <span>
            {{ record.productNumber }}
          </span>
        </template>
      </a-table-column>
      <!-- 箱数 -->
      <a-table-column
        key="packingNumber"
        data-index="packingNumber"
        align="center"
        width="8%"
      >
        <span slot="title"> 箱数</span>
        <template slot-scope="text, record">
          {{ record.packingNumber }}
        </template>
      </a-table-column>
      <!-- 长宽高 -->
      <a-table-column
        key="lengthNumber"
        data-index="lengthNumber"
        align="center"
        width="20%"
      >
        <span slot="title">长*宽*高(cm)</span>
        <template slot-scope="text, record" class="box-sizes">
          <!-- <a-input-number
              size="small"
              style="width: 25%"
              v-model="record.lengthNumber"
              :min="1"
            />*
            <a-input-number
              size="small"
              style="width: 25%"
              v-model="record.wideNumber"
              :min="1"
            />*
            <a-input-number
              size="small"
              style="width: 25%"
              v-model="record.highNumber"
              :min="1"
            /> -->
          {{ record.lengthNumber }}*{{ record.wideNumber }}*{{
            record.highNumber
          }}
        </template>
      </a-table-column>
      <!-- 重量 -->
      <a-table-column
        key="caratNumber"
        data-index="caratNumber"
        align="center"
        width="10%"
      >
        <span slot="title"> 重量(Kg)</span>
        <template slot-scope="text, record" class="box-sizes">
          <!-- <a-input-number
              size="small"
              v-model="record.caratNumber"
              :min="1"
            /> -->
          {{ record.caratNumber }}
        </template>
      </a-table-column>
      <!-- //操作 -->
      <a-table-column
        key="operation"
        data-index="operation"
        title="操作"
        width="200px"
        align="center"
      >
        <template slot-scope="text, record">
          <a
            href="javascript:;"
            style="color: #2929e0; border-bottom: 1px solid #2929e0"
            @click="lookImg(record)"
            >查看图片</a
          >
        </template>
      </a-table-column>
    </a-table>

    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>

    <!-- //图片放大 -->
    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="previewVisible = false"
    >
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>

    <!-- //查看图片 -->
    <a-modal v-model="lookImgVisible" title="查看图片" width="50%">
      <template slot="footer">
        <a-button
          style="background: #d7d7d7; color: #fff; border: none"
          @click="lookImgVisible = false"
          >取消</a-button
        >
      </template>
      <span v-if="imgUrlArray.length >= 1">
        <img
          @click="lookImgs(item)"
          :src="item"
          :style="
            imgUrlArray.length <= 0
              ? ''
              : 'width: 200px; height: 200px; margin: 15px; cursor: pointer'
          "
          v-for="(item, i) in imgUrlArray"
          :key="i"
        />
      </span>
      <span v-else> 还未上传图片！ </span>
    </a-modal>
  </div>
</template>

<script>
import { by_retreat_pageBatchOrder } from "@/apis/clientSide/ReturnsList/ReturnsList";
export default {
    props:['tabKey'],
    created() {
        this.getTabList()
    },
  data() {
    return {
      tableList: [],
      lookImgVisible: false,
      previewImage: "",
      previewVisible: false,
      imgUrlArray: [],
      searchData: {
        size: 10,
        current: 1,
        type:this.tabKey
      },
      total:1,
    };
  },
  methods: {
    //图片放大
    lookImgs(url) {
      this.previewImage = url;
      this.previewVisible = true;
    },
    //查看图片
    lookImg(record) {
      this.imgUrlArray =
        record.file === "" || record.file === null
          ? []
          : record.file.split(",");
      this.lookImgVisible = true;
    },
    async getTabList() {
      let {code,responseBody} = await by_retreat_pageBatchOrder(this.searchData);
      if(code==='200'){
          this.tableList=responseBody.records;
          this.total=responseBody.total*1;
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTabList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTabList();
    },
  },
};
</script>

<style lang="less" scoped>
</style>